<style>
.container {
  margin: 0 auto;
  width: 500px;
  height: 800px;
  background: #353535;
}

.body {
  height: 670px;
  width: 500px;
}

.card {
  height: 380px;
  width: 80px;
  //background: #f143cc;
  float: right;
  margin-top: 200px;
  //margin-right: -50px;
}

.footer {
  height: 20px;
  width: 500px;
}

.age3 {
  width: 100px;
  height: 20px;
  float: left;
}

.age4 {
  margin-top: 20px;
}
</style>

<template>
  <div id="app">
    <div class="container">
      <div class="head1" style="height: 30px"><img height="30px" src="../assets/img.png" width="500px"></div>

      <!--导航栏-->
      <div class="header">
        <span style="height: 50px; width: 50px; float: left; top: 7px; right: -10px">
          <van-icon color="white" name="tv-o" size="2.3rem"/>
        </span>
        <van-tabs v-model="active" background="#353535" color="white" style="width: 450px;">
          <van-tab title="同城" title-style="color: white; font-size: 20px;"></van-tab>
          <van-tab title="关注" @click="gz()" title-style="color: white; font-size: 20px;" ></van-tab>
          <van-tab title="推荐" title-style="color: white; font-size: 20px;"></van-tab>
        </van-tabs>
        <div style="height: 50px; width: 50px; float: right;  right: 10px">
          <van-icon color="white" name="search" size="2.3rem" @click="sou()"/>
        </div>
      </div>

      <!--身体-->
      <div class="body">
        <div class="card">
          <div class="age4">
<!--            <van-icon color="white" name="like" size="40" @click="zan()"/>-->
            <van-icon :color="this.isLiked ? 'red' : 'white'" @click="toggleLike" name="like" size="40"/>

            <span style="color: white; font-size: 20px">66.6w</span>
          </div>
          <div class="age4">
            <van-icon color="white" name="chat" size="40" @click="aaa()"/>
            <van-action-sheet v-model="show" get-container=".body"
                              style="  height: 50% ;width: 500px;" title="评论">
              <div class="content">内容</div>
            </van-action-sheet>
            <span style="color: white; font-size: 20px">66.6w</span>
          </div>
          <div class="age4">
            <van-icon color="white" name="share" size="40" @click="aaaa()"/>
            <van-share-sheet
                v-model="showShare"
                :options="options"
                style="  height: 50%; width: 500px;"
                title="立即分享给好友"
            />
            <span style="color: white; font-size: 20px">66.6w</span>
          </div>
        </div>

      </div>

      <!--底部-->
      <div class="footer">
        <div class="age3">
          <el-link style="font-size: 20px; color: white;">首页</el-link>
        </div>
        <div class="age3">
          <el-link style="font-size: 20px; color: white;" @click="py()">朋友</el-link>
        </div>
        <div class="age3" @click="tab()"><img height="40px" src="../assets/img_3.png" width="50px"></div>
        <div class="age3">
          <el-link style="font-size: 20px; color: white;" @click="xx()">消息</el-link>
        </div>
        <div class="age3">
          <el-link style="font-size: 20px; color: white;" @click="wd()">我的</el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import Vue from 'vue';
import Vant, {Toast} from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);
export default {
  data() {
    return {
      isLiked: false,
      active: 3,
      count: 0,
      isLoading: false,
      show: false,
      showShare: false,
      options: [
        [
          {name: '微信', icon: 'wechat'},
          {name: '朋友圈', icon: 'wechat-moments'},
          {name: '微博', icon: 'weibo'},
          {name: 'QQ', icon: 'qq'},
        ],
        [
          {name: '复制链接', icon: 'link'},
          {name: '分享海报', icon: 'poster'},
          {name: '二维码', icon: 'qrcode'},
          {name: '小程序码', icon: 'weapp-qrcode'},
        ],
      ],
    }
  },
  methods: {
    wd(){
      this.$router.push('/wd')
    },
    tab(){
      this.$router.push({path:'/publish'})
    },
    aaaa() {
      this.showShare = true
    },
    sou(){
      this.$router.push('/sou')
    },
    aaa() {
      this.show = true
    },
    toggleLike() {
      this.isLiked = !this.isLiked; // 切换颜色状态
    },
    py() {
      this.$router.push('/py')
    },
    gz() {
      this.$router.push({name: 'gz'})
    },
  },
  created() {
    const url = new URL(window.location.href);
    // 使用URLSearchParams解析查询参数
    const params = new URLSearchParams(url.search);
    const authCode = params.get('authCode');
    if (authCode != null){
      this.axios.get(`http://localhost:8209/auth?authCode=`+authCode).then(res=>{
        sessionStorage.setItem(res.data.data.data.tokenName, res.data.data.data.tokenValue);
      }).catch(err=>{

      })
    }
  }
}
</script>
